<template>
  <div class="carrier zy-content">
    <div v-show="!isShowDetails">
      <div class="searchBox search-box-layout">
        <Row :gutter="24">
          <Col span="6">
            <div>
              <p class="label">{{ $t("equipmentscrapped.Location") }}</p>
              <div class="ipt">
                <Cascader :value.sync="searchParams.orgCodes"/>
<!--                <Cascader-->
<!--                  clearable-->
<!--                  :data="orgList"-->
<!--                  v-model="searchParams.orgCode"-->
<!--                  :placeholder="$t('common.PleaseSelect')"-->
<!--                  change-on-select-->
<!--                ></Cascader>-->
              </div>
            </div>
          </Col>
          <Col span="4">
            <div>
              <p class="label">{{ $t("maintenance.EquipmentNo") }}</p>
              <div class="ipt">
                <Select
                  v-model="searchParams.deviceNo"
                  filterable
                  label-in-value
                  clearable
                  :remote-method="searchDevice"
                  :placeholder="$t('maintenance.EquipmentNo')"
                >
                  <Option
                    v-for="(item, index) of deviceList"
                    :value="item.deviceNo"
                    :key="index"
                    :label="item.deviceNo + '-' + item.deviceName"
                  >
                  </Option>
                </Select>
              </div>
            </div>
          </Col>
          <Col span="4">
            <div>
              <p class="label">{{ $t("实时状态") }}</p>
              <div class="ipt">
                <Select
                  v-model="searchParams.operatingState"
                  filterable
                  clearable
                  :placeholder="$t('common.PleaseSelect')"
                >
                  <Option
                    v-for="(item, index) of statusList"
                    :value="item.id"
                    :key="index"
                    :label="item.name"
                  >
                  </Option>
                </Select>
              </div>
            </div>
          </Col>
          <Col span="4">
            <div>
              <p class="label">{{ $t("日期") }}</p>
              <div class="ipt">
                <DatePicker
                  type="daterange"
                  :value="dateTimeRange"
                  :placeholder="$t('common.PleaseSelect')"
                  transfer-class-name="hide-handle-cancel"
                  placement="bottom"
                  transfer
                  :clearable="true"
                  @on-change="handleChangeDate"
                >
                </DatePicker>
              </div>
            </div>
          </Col>
          <Col span="4">
            <div>
              <p class="label hide-label">--</p>
              <div class="ipt">
                <Button
                  class="search-btn"
                  type="primary"
                  @click="changeNum()"
                  >{{ $t("common.Query") }}</Button
                >
                <Button class="reset-btn" @click="changeNum()"
                  >{{ $t("common.reset") }}
                </Button>
              </div>
            </div>
          </Col>
        </Row>
      </div>
      <div class="list-layout mt16">
        <div class="btns clear">
          <span class="title">{{ $t("common.listInformation") }}</span>
          <Button @click="exportTemplateClick">{{
            $t("导出")
          }}</Button>
            <Button @click="getTableColumns(columns)">
                {{ handleContextMenuStatus ? $t('显示操作栏') : $t('隐藏操作栏') }}
            </Button>
        </div>
        <div class="tableContent">
          <Table class="resizable-table" border @on-column-width-resize="onColumnWidthResize" :columns="columnsList" :data="dataSource">
            <template slot-scope="{ row }" slot="taskCount">
               <span @click="taskCountOpen(row)"
               style="cursor: pointer;
               color: #035beb;
               text-decoration:underline;  "
               >{{row.taskCount}}</span>
            </template>
          </Table>
        </div>
        <div class="pageWrap mt16">
          <pageLeftTitle :total="total" />
          <Page
            :total="total"
            :page-size="pageSize"
            :page-size-opts="$variable.pageSizes"
            :current="pageNum"
            @on-change="changePageNum"
            @on-page-size-change="changePageSize"
            show-sizer
            show-total
          />
        </div>
      </div>
    </div>

    <Modal :mask-closable="false"
        width="75%"
        v-model="tableVisible"
        :title="`${$t('任务详情')}`"
        :footer-hide="true"
        @on-visible-change="modelChange"
        class="modal-wrap-layout"
    >
      <div style="padding-bottom: 10px;">
        <Button @click="modelExport">{{$t('common.batchExport')}}</Button>
      </div>
      <Table height="600" class="resizable-table" border @on-column-width-resize="(a,b,c,d)=>{onColumnWidthResize(a,b,c,d,'towingmodaltable')}" :columns="columnsInfo"
             :data="dataSourceInfo"/>
      <div class="pageWrap mt16">
        <pageLeftTitle :total="modeLtotal" />
        <Page
            :total="modeLtotal"
            :page-size="modeLpageSize"
            :page-size-opts="$variable.pageSizes"
            :current="modeLpageNum"
            @on-change="modeLchangePageNum"
            @on-page-size-change="modeLchangePageSize"
            show-sizer
            show-total
        />
      </div>
    </Modal>
  </div>
</template>

<script>
import fileDownload from "js-file-download";
import recursion from "../../../util/recursion";
import Cascader from '@/components/Cascader'
import toggleTableOperation from "@/mixins/toggleTableOperation";
export default {
  name: "carrier",
  components: {Cascader},
    mixins:[toggleTableOperation],
  data() {
    return {
      columnsInfo:[
        {
          title: `${this.$t("设备编号")}`,
          key: "deviceNo",
          align: "center",
          minWidth: 110,
            resizable: true
        },
        {
          title: `${this.$t("开始位置")}`,
          key: "startLocation",
          align: "center",
          minWidth: 130,
            resizable: true
        },
        {
          title: `${this.$t("结束位置")}`,
          key: "endLocation",
          align: "center",
          minWidth: 130,
            resizable: true
        },
        {
          title: `${this.$t("任务距离")}`,
          key: "distance",
          align: "center",
          minWidth: 110,
            resizable: true
        },
        {
          title: `${this.$t("理论任务距离")}`,
          key: "theoreticalDuration",
          align: "center",
          minWidth: 120,
            resizable: true
        },
        {
          title: `${this.$t("任务开始时间")}`,
          key: "startTime",
          align: "center",
          minWidth: 170,
            resizable: true
        },
        {
          title: `${this.$t("任务结束时间")}`,
          key: "endTime",
          align: "center",
          minWidth: 170,
            resizable: true
        },
        {
          title: `${this.$t("任务持续时间")}(s)`,
          key: "taskDuration",
          align: "center",
          minWidth: 150,
            resizable: true
        },
        {
          title: `${this.$t("理论载货数量")}`,
          key: "theoryCargoQuantity",
          align: "center",
          minWidth: 120,
            resizable: true
        },
        {
          title: `${this.$t("实际载货数量")}`,
          key: "realCargoQuantity",
          align: "center",
          minWidth: 120,
            resizable: true
        },
        {
          title: `${this.$t("出门挂车数量")}`,
          key: "outgoingTrailersQuantity",
          align: "center",
          minWidth: 120,
            resizable: true
        },
        {
          title: `${this.$t("返回挂车数量")}`,
          key: "returnTrailersQuantity",
          align: "center",
          minWidth: 120,
            resizable: true
        }
      ],
      dataSourceInfo:[],
      tableVisible:false,
      searchParams: {},
      modeLtotal: 0,
      modeLpageNum: 1,
      modeLpageSize: 10,
      total: 0,
      pageNum: 1,
      pageSize: 10,
      pageSizeOption: [10, 20, 30],
      statusList: [
        { id: 1, name: this.$t("故障") },
        { id: 0, name: this.$t("运行") },
        { id: 2, name: this.$t("空闲") }
      ],
      deviceList: [],
      columns: [
        {
          title: `${this.$t("工厂")}`,
          key: "factoryName",
          align: "center",
          minWidth: 200,
            resizable: true
        },
        {
          title: `${this.$t("设备编号")}`,
          key: "deviceNo",
          align: "center",
          minWidth: 160,
            resizable: true
        },
        {
          title: `${this.$t("资产编号")}`,
          key: "assetsNo",
          align: "center",
          minWidth: 150,
            resizable: true
        },
        {
          title: `${this.$t("maintenance.TaskDate")}`,
          key: "scheduleDate",
          align: "center",
          minWidth: 150,
            resizable: true
        },
        {
          title: `${this.$t("计划运行时间")}(min)`,
          key: "planTime",
          align: "center",
          minWidth: 180,
            resizable: true
        },
        {
          title: `${this.$t("理论运行时间")}(min)`,
          key: "theoryTime",
          align: "center",
          minWidth: 180,
            resizable: true
        },
        {
          title: `${this.$t("实际运行时间")}(min)`,
          key: "runTime",
          align: "center",
          minWidth: 180,
            resizable: true
        },
        {
          title: `${this.$t("报警时间")}(min)`,
          key: "errorTime",
          align: "center",
          minWidth: 180,
            resizable: true
        },
        {
          title: `${this.$t("待机时间")}(min)`,
          key: "standByTime",
          align: "center",
          minWidth: 180,
            resizable: true
        },
        {
          title: `${this.$t("关机时间")}(min)`,
          key: "unattendedTime",
          align: "center",
          minWidth: 180,
            resizable: true
        },
        {
          title: `${this.$t("实时状态")}`,
          key: "agvStatusStr",
          align: "center",
          minWidth: 100,
            resizable: true
        },
        {
          title: `${this.$t("实时位置")}`,
          key: "agvPosition",
          align: "center",
          minWidth: 220,
            resizable: true
        },
        {
          title: `${this.$t("报警信息")}`,
          key: "alarmInformation",
          align: "center",
          minWidth: 220,
          ellipsis: true,
            resizable: true
        },
        {
          title: `${this.$t("任务数")}`,
          key: "taskCount",
          align: "center",
          minWidth: 120,
          slot:"taskCount",
            resizable: true
        },
        {
          title: `${this.$t("报警次数")}`,
          key: "errorCount",
          align: "center",
          minWidth: 120,
            resizable: true
        },
        {
          title: `${this.$t("时间稼动率")}(%)`,
          key: "a",
          align: "center",
          minWidth: 150,
            resizable: true
        },
        {
          title: `${this.$t("性能稼动率")}(%)`,
          key: "p",
          align: "center",
          minWidth: 150,
            resizable: true
        },
        {
          title: `OEE(%)`,
          key: "oee",
          align: "center",
          minWidth: 150,
            resizable: true
        },
      ],
      dataSource: [],
      dateTimeRange: [],
      orgList: [],
      tarGetrow:{}
    };
  },
    created() {
        this.getTableColumnsWidth(this.columns)
        this.getColumnWidth(this.columnsInfo,'towingmodaltable')
    },
    mounted() {
    this.changeNum();
    this.getOrgList();
  },
  methods: {
    modelExport(){
      const {deviceNo,scheduleDate} =  this.tarGetrow
      const filName = this.$t('Carrier详情');
      this.axios({
        method: "post",
        url: "/dms/agv/export",
        responseType: "blob",
        data: {
          deviceNo,scheduleDate
        },
      }).then((res) => {
        fileDownload(res, filName + ".xlsx");
      });
    },
    modelChange(val){
      if (!val){
          this.modeLpageNum = 1
          this.modeLpageSize = 10
          this.modeLtotal = 0
          this.dataSourceInfo = []
      }
    },
    taskCountOpen(row){
      this.tarGetrow = row
      const {deviceNo,scheduleDate} = row
      if (!(this.dataSourceInfo && this.dataSourceInfo.length)){
        this.tableVisible = false
      }
      this.axios({
        method: "post",
        url: "/dms/agv/list",
        data: {
          deviceNo,
          scheduleDate,
          pageNum: this.modeLpageNum,
          pageSize: this.modeLpageSize,
        }
      }).then(res=>{
        if (res.data.list && res.data.list.length){
          this.dataSourceInfo = res.data.list
          this.tableVisible = true
          this.modeLtotal = res.data.total
        }else {
          this.$Message.warning('此任务无详情列表!')
        }
      })
    },
    searchDevice(query) {
      this.axios({
        method: "get",
        url: "/dms/dmsDevice/deviceListByParams",
        params: {
          orgCode:
            this.searchParams.orgCode && this.searchParams.orgCode.at(-1),
          param: query,
        },
      }).then((res) => {
        if (res.code === 200) {
          this.deviceList = res.data;
        }
      });
    },
    // 获取使用位置
    getOrgList() {
      this.axios({
        method: "get",
        url: "/basic/organization/findListByToken",
        params: { level: 1 },
      }).then((res) => {
        if (res.code === 200) {
          const obj = {
            label: "name",
            value: "code",
            children: "children",
          };
          this.orgList = recursion.convertTree(res.data, obj);
        } else {
          this.$Message.warning({
            content: res.msg,
            duration: 6,
            closable: true,
          });
        }
      });
    },
    //日期
    handleChangeDate(val) {
      this.dateTimeRange = val;
    },
    //分页
    changeNum() {
      this.pageNum = 1;
      this.searchList();
    },
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.searchList();
    },
    modeLchangePageSize(val) {
      this.modeLpageSize = val
      this.taskCountOpen(this.tarGetrow)
    },
    modeLchangePageNum(val){
      this.modeLpageNum = val
      this.taskCountOpen(this.tarGetrow)
    },
    changePageNum(val) {
      this.pageNum = val;
      this.searchList();
    },
    searchList() {
      //查询列表
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        ...this.searchParams
      };

      if (this.searchParams.orgCodes && this.searchParams.orgCodes.length){
        params.orgCodes = this.searchParams.orgCodes
      }

      // params.orgCode = params.orgCode && params.orgCode.at(-1);

      if (this.dateTimeRange[1]) {
        params.startDate = this.$moment(this.dateTimeRange[0]).format(
          "YYYY-MM-DD"
        );
        params.endDate = this.$moment(this.dateTimeRange[1]).format(
          "YYYY-MM-DD"
        );
      }
      this.axios({
        method: "post",
        url: "/dms/agv/carrier",
        data: params,
      }).then((res) => {
        if (res.code === 200) {
          this.dataSource = res.data.list;
          this.total = res.data.total;
        } else {
          this.$Message.warning({
            content: res.msg,
            duration: 6,
            closable: true,
          });
        }
      });
    },
    //导出
    exportTemplateClick() {
      let params = {
        ...this.searchParams
      };
      params.orgCode = params.orgCode && params.orgCode.at(-1);
      if (this.dateTimeRange[1]) {
        params.startTime = this.$moment(this.dateTimeRange[0]).format(
          "YYYY-MM-DD 00:00:00"
        );
        params.endTime = this.$moment(this.dateTimeRange[1]).format(
          "YYYY-MM-DD 23:59:59"
        );
      }
      const filName = `Carrier报表`;
      this.axios({
        method: "post",
        url: "/dms/agv/carrierExport",
        responseType: "blob",
        data: params,
      }).then((res) => {
        fileDownload(res, filName + ".xlsx");
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>
